<template>
  <view v-show="tabs.length" class="new-container">
    <Tabs v-model="tabActive" :isSwiper="true">
      <TabNav tabBarColor="#FFFFFF" tabActiveFontSize="32rpx" :tab-item-flex="0" />
      <template v-for="(item, index) in tabs" :key="index">
        <TabsItem :name="item.optionsName" :value="index"></TabsItem>
      </template>
    </Tabs>

    <Paglist
      v-model="dataList"
      :is-init-api="false"
      :parame="parame"
      @register="register"
      :scroll-top-bottom="200"
    >
      <template v-for="(v, i) in dataList" :key="v.id">
        <view :class="{ 'pt-15': i === 0 }">
          <NewsItem :item="v" />
        </view>
      </template>
    </Paglist>
  </view>
</template>

<script setup lang="ts">
  import { newsTabList } from '@/api/dynamicAllocation';
  import type { NewsTabResult } from '@/api/dynamicAllocation/types';
  import { ref, provide, reactive, watch, onMounted } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { informationPageList } from '@/api/home/index';
  import type { InformationPageListResData } from '@/api/home/types';
  import { useConList } from '@/components/Paglist/useConList';
  import NewsItem from '@/components/NewsItem/index.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';

  provide('api', (obj: any) => {
    return informationPageList(obj);
  });
  const emit = defineEmits(['update:modelValue', 'getTitle']);

  const dataList = ref<InformationPageListResData[]>([]);
  const [register, { refresh }] = useConList();

  const parame = reactive({
    module: 1,
    moduleSub: 1,
  });

  const tabs = ref<NewsTabResult[]>([]);

  const tabActive = ref(0);
  const tabTitle = ref('');

  function getNewsTabList() {
    newsTabList().then((r) => {
      tabs.value = r.records;
      const first = tabs.value[tabActive.value];
      if (first) {
        setParams(first.optionsId);
        tabTitle.value = first.optionsName;
        emit('getTitle', tabTitle.value);
      } else {
        tabActive.value = 0;
      }
    });
  }

  onMounted(() => getNewsTabList());

  const handleActive = (i: number) => {
    const { optionsName, optionsId } = tabs.value[i];
    tabTitle.value = optionsName;
    setParams(optionsId);
    handleEmit();
  };

  watch(tabActive, handleActive);

  function setParams(optionsId: string) {
    const [module, moduleSub] = optionsId.split('/');
    parame.module = Number(module);
    parame.moduleSub = Number(moduleSub);
    refresh?.();
  }

  const handleEmit = () => {
    emit('getTitle', tabTitle.value);
  };
</script>

<style lang="scss" scoped>
  .new-container {
    min-height: 1000rpx;
    .news-tab {
      display: flex;
      align-items: flex-end;
      padding-left: 10rpx;

      &-item {
        font-size: 27rpx;
        color: #473a3a;
        margin-right: 10rpx;
        max-width: 150rpx;
      }

      &-item__active {
        font-size: 31rpx;
        color: #333;
        font-weight: bolder;
      }
    }
  }
</style>
